---
{
	"title": "Balise details fermée",
	"language": "fr",
	"category": "Plugiciels",
	"description": "Garder les éléments details visés fermés sur écran défini et moins.",
	"tag": "details-close",
	"parentdir": "details-close",
	"altLangPrefix": "details-close",
	"dateModified": "2025-08-27"
}
---
<div class="wb-prettify all-pre hide"></div>

<h2>Exemple de l'élément <code>details</code> maintenu fermé sur un petit écran et moins (lg, md, sm, xs et xxs)</h2>
<p>Redimensionnez votre navigateur pour voir le fonctionnement du plugiciel.</p>
<details class="provisional wb-details-close" open>
	<summary>Je suis fermé sur mobile (par défaut)</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="lg">
	<summary>Je suis fermé sur un grand écran</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="md">
	<summary>Je suis fermé sur un écran moyen</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="sm">
	<summary>Je suis ouvert sur un petit écran</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="xs">
	<summary>Je suis fermé sur un écran très petit</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>
<details class="wb-details-close" open data-breakpoint="xxs">
	<summary>Je suis ouvert sur un écran très très petit</summary>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rhoncus, neque accumsan faucibus ultricies, libero massa mollis neque, et mollis libero enim a ligula. Ut dictum tempor luctus. Ut convallis vehicula sapien a facilisis. Morbi eget lectus efficitur, finibus metus eu, feugiat felis. Praesent sodales elit sed finibus pharetra. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent quis sem lacinia, accumsan sem et, lacinia turpis.</p>
</details>

<h3>Code source</h3>
<pre><code>&lt;details class="wb-details-close" open&gt;
	&lt;summary&gt;Je suis fermé sur mobile (par défaut)&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="lg"&gt;
	&lt;summary&gt;Je suis fermé sur un grand écran&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="md"&gt;
	&lt;summary&gt;Je suis fermé sur un écran moyen&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="sm"&gt;
	&lt;summary&gt;Je suis ouvert sur un petit écran&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="xs"&gt;
	&lt;summary&gt;Je suis fermé sur un écran très petit&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
&lt;details class="wb-details-close" open data-breakpoint="xxs"&gt;
	&lt;summary&gt;Je suis ouvert sur un écran très très petit&lt;/summary&gt;
	&lt;p&gt;...&lt;/p&gt;
&lt;/details&gt;
</code></pre>
